import React, { Fragment } from 'react';
import { Form, Button, Icon } from 'antd';
import { primaryColor } from '@/defaultSettings';

const defaultStyle = { color: primaryColor };

const CollapseSearch = ({
    defaultValue = false,
    children,
    expandNode = '收起',
    collapseNode = '高级搜索',
    expandIcon,
    collapseIcon,
    iconStyle,
    marginBottom = 16,
    onSubmit,
    expanded,
    onExpand,
    showExpand = true
}) => {
    const [expand, setExpand] = React.useState(defaultValue);
    const indexRef = React.useRef(null);

    const childrenArr = React.Children.map(children, (item, index) => ({ ...item, key: index })).filter(item =>
        React.isValidElement(item)
    );

    const handleSubmit = e => {
        e.preventDefault();
        if (onSubmit) onSubmit();
    };

    React.useEffect(() => {
        setExpand(expanded || false);
    }, [expanded]);

    const defaultExpandIcon = <Icon type="caret-up" style={{ ...defaultStyle, ...iconStyle }} />;
    const defaultCollapseIcon = <Icon type="caret-down" style={{ ...defaultStyle, ...iconStyle }} />;

    const renderExpandIcon = () => {
        if (expand) {
            return expandIcon || defaultExpandIcon;
        }
        return collapseIcon || defaultCollapseIcon;
    };

    const renderBtn = () => (
        <div
            style={{ display: 'inline-block', margin: '0 0 0 12px', cursor: 'pointer', ...defaultStyle }}
            onClick={() => {
                setExpand(!expand);
                if (onExpand) onExpand(!expand);
            }}
        >
            {expand ? expandNode : collapseNode}
            <span style={{ marginLeft: 8 }}>{renderExpandIcon()}</span>
        </div>
    );

    return (
        <Form layout="inline" onSubmit={handleSubmit} style={{ marginBottom: 4 }}>
            {childrenArr.map((item, index) => {
                const { props, key } = item;
                const { collapsed, style, ...rest } = props;
                if (index === 0) {
                    indexRef.current = null;
                }
                if (collapsed && !indexRef.current) {
                    indexRef.current = index;
                }
                const finalItem = {
                    ...item,
                    props: {
                        ...rest,
                        style: {
                            marginBottom,
                            ...style,
                            display: indexRef.current !== null && !expand ? 'none' : undefined
                        }
                    }
                };
                if (index === indexRef.current) {
                    return (
                        <Fragment key={key}>
                            {expand && <br />}
                            {finalItem}
                        </Fragment>
                    );
                }
                return finalItem;
            })}
            <Form.Item>
                <Button type="primary" htmlType="submit">
                    搜索
                </Button>
                {showExpand && renderBtn()}
            </Form.Item>
        </Form>
    );
};

export default CollapseSearch;
